<template>
  <div class="cache">
    <!-- 上面基本信息卡片 -->
    <div class="topcard">
      <el-card class="box-card">
        <el-descriptions title="基本信息" :column="4" border>
          <el-descriptions-item label="Redis版本">
            {{ cache.info.redis_version }}
          </el-descriptions-item>
          <el-descriptions-item label="运行模式">
            {{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}
          </el-descriptions-item>
          <el-descriptions-item label="端口">
            {{ cache.info.tcp_port }}
          </el-descriptions-item>
          <el-descriptions-item label="客户端数">
            {{ cache.info.connected_clients }}
          </el-descriptions-item>
          <el-descriptions-item label="运行时间(天)">
            {{ cache.info.uptime_in_days }}
          </el-descriptions-item>
          <el-descriptions-item label="使用内存">
            {{ cache.info.used_memory_human }}
          </el-descriptions-item>
          <el-descriptions-item label="使用CPU">
            {{ cache.info.used_cpu_user_children }}
          </el-descriptions-item>
          <el-descriptions-item label="内存配置">
            {{ cache.info.maxmemory_human }}
          </el-descriptions-item>
          <el-descriptions-item label="AOF是否开启">
            {{ cache.info.aof_enabled == "0" ? "否" : "是" }}
          </el-descriptions-item>
          <el-descriptions-item label="RDB是否成功">
            {{ cache.info.rdb_last_bgsave_status }}
          </el-descriptions-item>
          <el-descriptions-item label="Key数量">
            {{ cache.dbSize }}
          </el-descriptions-item>
          <el-descriptions-item label="网络入口/出口">
            {{ cache.info.instantaneous_input_kbps }}kps/{{
              cache.info.instantaneous_output_kbps
            }}kps
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>

    <!-- 图表区域 -->

    <div class="echartsBox">
      <div class="leftecharts">
        <h1>命令统计</h1>
        <div ref="firstEcharts"></div>
      </div>
      <div class="rightecharts">
        <h1>内存信息</h1>
        <div ref="secondEchorts"></div>
      </div>
    </div>
  </div>
</template>

<script>
// used_memory_human
import * as echarts from "echarts";
export default {
  name: "Cache",
  data() {
    return {
      cache: {
        info: {
          redis_version: "",
          redis_mode: "",
          tcp_port: "",
          connected_clients: "",
          uptime_in_days: "",
          used_memory_human: "",
          used_cpu_user_children: "",
          maxmemory_human: "",
          aof_enabled: "",
          rdb_last_bgsave_status: "",
          instantaneous_input_kbps: "",
          instantaneous_output_kbps: "",
        },
        dbSize: "",
      },
      commandStats: [],
      used_memory_human: "",
    };
  },
  methods: {
    drawFirstImg() {
      let myChart = echarts.init(this.$refs.firstEcharts);
      let datas = [this.commandStats];
      let option = {
        title: {
          left: "center",
          textStyle: {
            color: "#999",
            fontWeight: "normal",
            fontSize: 14,
          },
        },
        color: ["#fac858", "#fff"],
        series: datas.map(function (data, idx) {
          var top = idx * 33.3;
          return {
            type: "pie",
            roseType: "radius",
            // center: ["50%", "38%"],
            radius: [15, 95],
            // top: top + "%",
            // height: "33.33%",
            left: "center",
            top: "center",
            width: 400,
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < myChart.getWidth() / 2;
              const points = params.labelLinePoints;
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width;
              return {
                labelLinePoints: points,
              };
            },
            data: data,
          };
        }),
      };
      myChart.setOption(option);
    },
    drawSecondImg() {
      let myChart = echarts.init(this.$refs.secondEchorts);
      let option = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        series: [
          {
            name: "Pressure",
            type: "gauge",
            detail: {
              formatter: this.used_memory_human,
            },
            data: [
              {
                value: 0,
                name: "内存消耗",
              },
            ],
            max: 1000,
          },
        ],
      };
      myChart.setOption(option);
    },
    async init() {
      try {
        let { code, data, msg } = await this.$api.cache.getCache();
        if (+code === 200) {
          this.cache.info.redis_version = data.info.redis_version;
          this.cache.info.redis_mode = data.info.redis_mode;
          this.cache.info.tcp_port = data.info.tcp_port;
          this.cache.info.connected_clients = data.info.connected_clients;
          this.cache.info.uptime_in_days = data.info.uptime_in_days;
          this.cache.info.used_memory_human = data.info.used_memory_human;
          this.cache.info.used_cpu_user_children =
            data.info.used_cpu_user_children;
          this.cache.info.used_cpu_user_children =
            data.info.used_cpu_user_children;
          this.cache.info.maxmemory_human = data.info.maxmemory_human;
          this.cache.info.aof_enabled = data.info.aof_enabled;
          this.cache.info.rdb_last_bgsave_status =
            data.info.rdb_last_bgsave_status;
          this.cache.info.instantaneous_input_kbps =
            data.info.instantaneous_input_kbps;
          this.cache.info.instantaneous_output_kbps =
            data.info.instantaneous_output_kbps;
          this.cache.dbSize = data.dbSize;
          // 图表数据
          this.commandStats = data.commandStats;
          this.drawFirstImg();
          this.used_memory_human = data.info.used_memory_human;
          this.drawSecondImg();
        } else {
          this.$message.error(msg);
        }
      } catch (_) {}
    },
  },
  created() {
    this.init();
  },
  mounted() {
    // this.drawFirstImg();
  },
};
</script>

<style lang="less" scoped>
.cache {
  margin-left: 15px;
}
// background: #f3f4f3;
.topcard {
  width: 98%;
  margin: 0 auto;
  margin-top: 20px;
  background: #f3f4f5;
}
.echartsBox {
  width: 98%;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .leftecharts {
    > div {

      width: 477px;
      height: 402px;
    }
  }
  .rightecharts > div {
    width: 477px;
    height: 402px;
  }
  > div {
    width: 47%;
    // height: 500px;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;

    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    h1 {
      border-bottom: 1px solid #ddd;
      padding: 14px 15px 7px;
    }
  }
}
</style>